import React,{Component } from 'react'
import "antd/dist/antd.css";
import { Button ,Input ,List} from 'antd';
import store from '../store/index.js'
import {getInputChange,getButtonAddClick,getListDtlClick} from '../store/ActionCreators.js'

class TodoList extends Component{

    constructor(props) {
        super(props);
        this.state = store.getState();
        this.inputChange = this.inputChange.bind(this);
        this.hanldStormChange = this.hanldStormChange.bind(this);
        this.buttonAddClick = this.buttonAddClick.bind(this);
        store.subscribe(this.hanldStormChange);
    }

    render() {
        return (
            <div>
                <Input
                    placeholder="Basic usage" style={{width:300}}
                    onChange={this.inputChange}
                    value = {this.state.inputValue}
                />
                <Button type="primary" onClick={this.buttonAddClick}>Primary</Button>
                <List
                    bordered
                    dataSource={this.state.list}
                    renderItem={(item,index) => (<List.Item onClick={this.listDtlClick.bind(this,index)}>{item}</List.Item>)}
                />
            </div>
        )
    }
    inputChange(e){
        const action = getInputChange(e.target.value);
        store.dispatch(action);
    }
    hanldStormChange(){
        this.setState(store.getState);
    }
    buttonAddClick(){
        const action = getButtonAddClick();
        store.dispatch(action);
    }
    listDtlClick(index){
        const action = getListDtlClick(index);
        store.dispatch(action);
    }
}
export  default TodoList;